<template>
  <div class="login"> 
    <div class="logo"></div>
    <div class="float-on-bg">
      <div class="float-icona"></div>
      <div class="float-iconb"></div>
      <div class="float-iconc"></div>
      <div class="float-icond"></div>
      <div class="float-icone"></div>
      <div class="float-iconf"></div>
    </div>
    <div class="login-con">
        <div class="form-con">
          <p class="form-title"> 欢迎登陆-华勤RFID智能洗涤系统 </p>
          <Form ref="loginForm" :model="formInline" :rules="ruleInline">
            <FormItem prop="userName">
              <Input v-model="formInline.userName" :placeholder='$t("login.placeholderUsername")' autocomplete="off">
                 <Icon :size="18" type="ios-person-outline" slot="prepend" color="#fff"></Icon>
              </Input>
            </FormItem>
            <FormItem prop="password">
              <Input type="password" v-model="formInline.password" :placeholder='$t("login.placeholderPassword")' autocomplete="off">
                <span slot="prepend">
                  <Icon :size="18" type="ios-lock" color="#fff"></Icon>
                </span>
              </Input>
            </FormItem>
            <FormItem>
              <Button @click="handleSubmit" type="primary" long :loading="loading">{{ $t("login.loginBtn")}}</Button>
            </FormItem>
            <FormItem prop="wpbool">
              <Checkbox v-model="wpbool" @on-change="changPw">{{ $t("login.loginForgetPW") }}</Checkbox>
            </FormItem>
          </Form>
        </div>
    </div>
    <div class="login-foot">
      技术支持：北京华勤创新软件有限公司
    </div>
  </div>
</template>
<script>
import API from "./api";
import baseLogin from "@/view/login/login";
import ValidatorRule from "@/filters/validator-rule";
import i18n from "./locale";
import loginIcon from "@/assets/images/logo-icon.png";
export default {
  extends: baseLogin,
  data() {
    return {
      i18n: i18n,
      loginIcon: loginIcon,
      formInline: {
        userName: "",
        password: ""
      },
      ruleInline: {
        userName: ValidatorRule.user,
        password: ValidatorRule.password
      },
      wpbool: false
    };
  },
  created() {
    this.getRoleList();
  },
  methods: {
    handleSubmit() {
      let tthis = this;
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          let userName = this.formInline.userName,
            password = this.formInline.password;
          if (!this.loading) {
            this.loading = true;
            API.login({ userName, password })
              .then(res => {
                setTimeout(function() {
                  tthis.loading = false;
                }, 1000);
                if (res) {
                  const data = res.data;
                  this.$store.commit("setToken", data.userName);
                  this.$store.commit("setAccess", data.access.toString());
                  this.$store.commit("setUserInfo", data);
                  this.goToNext();
                }
              })
              .catch(err => {
                setTimeout(function() {
                  tthis.loading = false;
                }, 1000);
                if (err.msg) {
                  this.$Message.error({
                    duration: 2,
                    content: err.msg
                  });
                } else {
                  this.$Message.error("服务内部错误");
                }
              });
          }
        }
      });
    },

    getRoleList() {
      //let str = sessionStorage.getItem("roleList");
      //if (!str) {
      API.getRoleList()
        .then(res => {
          if (res.code == 200) {
            let data = res.data;
            if (data) {
              sessionStorage.setItem("roleList", JSON.stringify(data));
            }
          }
        })
        .catch(err => {
          this.$Message.error("请求异常!");
        });
      //}
    },

    goToNext() {
      this.$router.push({
        name: "home"
      });
    }
  }
};
</script>

<style lang="less">
/*该处样式不能与下面合并，class没在模板上，使用scoped模式无法生效*/
.login {
  .ivu-input-group-prepend {
    background-color: #323968;
    border: 0px;
  }

  input {
    background-color: #323968;
    color: #fff;
  }

  .ivu-input:focus {
    box-shadow: none;
  }

  .ivu-form-item-error .ivu-input:focus {
    box-shadow: none;
  }

  .ivu-input {
    border: 0px;
  }
}
</style>

<style lang="less" scoped>
.login {
  background-image: url("../../assets/images/bg.png");

  .login-con {
    width: 280px;
    background: #1e2051;
    opacity: 0.9;
    padding: 0 10px;
    border-radius: 5px;
  }

  .form-con {
    padding: 0px;
  }

  .form-title {
    color: #fff;
    font-size: 15px;
    text-align: center;
    height: 50px;
    line-height: 50px;
  }

  .logo {
    width: 107px;
    height: 107px;
    background-image: url("../../assets/images/left-logo.png");
    animation: ud infinite 2500ms ease-in-out;
  }

  .float-on-bg {
    position: absolute;
    background-size: cover;
    background-position: center;
    background-image: url("../../assets/images/bg-float.png");
    animation: bg infinite 2500ms ease-in-out;
    width: 1440px;
    height: 969px;
    top: 30px;
    left: 100px;
    margin: auto;
  }

  .float-icona {
    width: 45px;
    height: 39px;
    left: 500px;
    top: 130px;
    position: absolute;
    background-image: url("../../assets/images/icona.png");
    background-size: cover;
    background-position: center;
    animation: icona infinite 2800ms ease-in-out;
  }

  .float-iconb {
    width: 45px;
    height: 48px;
    left: 560px;
    top: 240;
    position: absolute;
    background-image: url("../../assets/images/iconb.png");
    background-size: cover;
    background-position: center;
    animation: iconb infinite 3500ms ease-in-out;
  }

  .float-iconc {
    width: 64px;
    height: 61px;
    left: 450px;
    top: 300px;
    position: absolute;
    background-image: url("../../assets/images/iconc.png");
    background-size: cover;
    background-position: center;
    animation: iconc infinite 4000ms ease-in-out;
  }

  .float-icond {
    width: 43px;
    height: 45px;
    left: 536px;
    top: 148px;
    position: absolute;
    background-image: url("../../assets/images/icond.png");
    background-size: cover;
    background-position: center;
    animation: ud infinite 2500ms ease-in-out;
  }

  .float-icone {
    width: 43px;
    height: 45px;
    left: 720px;
    top: 248px;
    position: absolute;
    background-image: url("../../assets/images/icond.png");
    background-size: cover;
    background-position: center;
    animation: ud infinite 2500ms ease-in-out;
  }

  .float-iconf {
    width: 43px;
    height: 45px;
    left: 898px;
    top: 325px;
    position: absolute;
    background-image: url("../../assets/images/icond.png");
    background-size: cover;
    background-position: center;
    animation: ud infinite 2500ms ease-in-out;
  }

  /*上下浮动*/
  @keyframes ud {
    0% {
      transform: translate3d(0, 0, 0);
    }
    50% {
      transform: translate3d(0, 4px, 0);
    }
    100% {
      transform: translate3d(0, 0, 0);
    }
  }

  /*上下浮动*/
  @keyframes bd {
    0% {
      transform: translate3d(0, 0, 0);
    }
    50% {
      transform: translate3d(0, 2px, 0);
    }
    100% {
      transform: translate3d(0, 0, 0);
    }
  }

  /*小图标*/
  @keyframes icona {
    0% {
      transform: rotateY(0deg);
      top: 130px;
      opacity: 0;
    }
    50% {
      transform: rotateY(360deg);
      top: 90px;
      opacity: 1;
    }
    60% {
      transform: rotateY(360deg);
      top: 90px;
      opacity: 1;
    }
    100% {
      transform: rotateY(0deg);
      top: 50px;
      opacity: 0;
    }
  }
  @keyframes iconb {
    0% {
      transform: rotateY(0deg);
      top: 240px;
      opacity: 0;
    }
    50% {
      transform: rotateY(360deg);
      top: 200px;
      opacity: 1;
    }
    60% {
      transform: rotateY(360deg);
      top: 200px;
      opacity: 1;
    }
    100% {
      transform: rotateY(0deg);
      top: 160px;
      opacity: 0;
    }
  }
  @keyframes iconc {
    0% {
      transform: rotateY(0deg);
      top: 300px;
      opacity: 0;
    }
    50% {
      transform: rotateY(360deg);
      top: 260px;
      opacity: 1;
    }
    60% {
      transform: rotateY(360deg);
      top: 260px;
      opacity: 1;
    }
    100% {
      transform: rotateY(0deg);
      top: 220px;
      opacity: 0;
    }
  }
  //旋转
  @keyframes icon {
    0% {
      transform: rotateY(0deg);
    }
    50% {
      transform: rotateY(360deg);
    }
  }

  .login-foot {
    position: absolute;
    bottom: 10px;
    font-size: 14px;
    width: 100%;
    text-align: center;
    color: #4e51c5;
  }
}
</style>
